<template>
  <div class="businessPage-wrapper">
    <div class="businessTopbar">
      <div class="businessTitle-wrapper">
        <div class="businessTitle-left">
          <span class="businessTitle">考试报名</span>
        </div>
      </div>
      <div class="businessSearches-wrapper">
        <div class="businessSearches-left">
          
          <div class="businessSearchCondition" style="width: 200px">
            <label>试卷名称：</label>
            <el-input class="businessConditionInput" v-model="signUpTestPaper"></el-input>
          </div>
          <div class="businessSearchCondition" style="width: 200px">
            <label>培训名称：</label>
            <el-input class="businessConditionInput" v-model="signUpTraining"></el-input>
          </div>
          <div class="businessSearchCondition" style="width: 200px">
            <label>专业：</label>
            <el-select class="businessConditionInput"
              v-model="specializedSubject" placeholder="请选择" clearable  filterable slot="empty" @change="changeMajor">
              <el-option
                v-for="item in tableDataState"
                :key="item.ID"
                :label="item.NAME"
                :value="item.ID"></el-option>
            </el-select>
          </div>
          <div class="businessSearchCondition" style="width: 200px">
            <label>报名状态：</label>
            <el-select class="businessConditionInput" 
            v-model="registration" placeholder="请选择" clearable filterable slot="empty" @change="changeState">
              <el-option
                v-for="item in registrationStatus"
                :key="item.ID"
                :label="item.NAME"
                :value="item.ID"></el-option>
            </el-select>
          </div>
        </div>
        <div class="businessSearches-right">
          <span class="businessButtonConfirm" @click="getSignUp">立即查询</span>
          <span class="businessButtonCancel" @click="signUpQuery">清空条件</span>
        </div>
      </div>
    </div>
    <div class="businessContent-wrapper">
      <div class="businessButtons-wrapper">
        <span class="businessButtonAdd" @click="signUp">报名</span>
        <span class="businessButtonDelete">撤销报名</span>
      </div>
      <el-table class="businessTable" height="calc(100% - 120px)" :data="tableDataFirst" tooltip-effect="dark" ref="multipleTable" @select="select" >
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column prop="paperName" label="试卷名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="safetyTrainName" label="培训名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="specialtyName" label="专业" show-overflow-tooltip></el-table-column>
        <el-table-column prop="signUpStartTime" label="报名开始时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="signUpEndTime" label="报名截止时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="examStartTime" label="考试开始时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="examEndTime" label="考试结束时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="准考证信息" show-overflow-tooltip>
          <template slot-scope="scope">
            <span @click.stop="handleAdmissionTickets(scope.row)">{{ scope.row.infoa }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="reportStatusName" label="报名状态" show-overflow-tooltip></el-table-column>
      </el-table>
      <el-pagination class="businessPagination"
        background
        @size-change="examinationPageSize"
        @current-change="examinationCurrentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next"
        :total= this.tableDataThird ></el-pagination>
    </div>
    <div class="businessMask" v-if="signUpFormShow">
      <div class="businessDialog" style="width: 568px;height: 438px;">
        <div class="dialog-header" v-winmove>
          <span style="float: left">考场信息</span>
        </div>
        <div class="dialog-body">
            <el-table
             ref="tb"
             :data="selectData"
             tooltip-effect="dark"
             style="width: 100%"
             >
             <el-table-column
               type="selection"
               width="55">
             </el-table-column>
             <el-table-column
               label="考场名称"
               width="120"
               show-overflow-tooltip>
             </el-table-column>
             <el-table-column
               prop="name"
               label="考场地址"
               width="200"
               show-overflow-tooltip>
             </el-table-column>
             <el-table-column
               prop="address"
               label="人员"
               show-overflow-tooltip>
             </el-table-column>
            </el-table>

          <!-- <div class="row" @dblclick="signUpFormDbClick(0)">
            <span>考试：</span>
            <el-input v-model="signUpForm.examination" class="systemInput" readonly placeholder="双击选择考试"></el-input>
          </div>
          <div class="row" @dblclick="signUpFormDbClick(1)">
            <span>考场：</span>
            <el-input v-model="signUpForm.examinationRoom" class="systemInput" readonly placeholder="双击选择考场"></el-input>
          </div> -->
        </div>
        <div class="dialog-footer right">
          <span class="businessButtonConfirm">确定</span>
          <span class="businessButtonCancel" @click="signUpFormShow = false">取消</span>
        </div>
      </div>
    </div>
    <template-window v-if="templatePageShow" :params="templatePageParams"
                     @confirm="getTemplateWindowData" @cancel="closeTemplateWindow"></template-window>
    <div class="businessMask" v-if="admissionTicketsShow">
      <div class="businessDialog" style="width: 568px;height: 438px;">
        <div class="dialog-header" v-winmove>
          <span class="icon iconfont iconbiaoqianlan-guanbi" @click="admissionTicketsShow = false"></span>
          <span>保存</span>
          <span class="icon iconfont icongonggong_xiazai_16"></span>
        </div>
        <div class="dialog-body">
          <h2>准考证</h2>
          <div class="pic-wrapper">
          </div>
          <table border="1" cellspacing="0" cellpadding="0">
            <tr>
              <td width="110px" height="50px">考场编号</td>
              <td width="600px">
                <el-input></el-input>
              </td>
            </tr>
            <tr>
              <td>准考证号</td>
              <td>
                <el-input readonly v-model="admissionTicketsInfo.num"></el-input>
              </td>
            </tr>
            <tr>
              <td>姓名</td>
              <td>
                <el-input></el-input>
              </td>
            </tr>
            <tr>
              <td>性别</td>
              <td>
                <el-input></el-input>
              </td>
            </tr>
            <tr>
              <td>所属单位</td>
              <td>
                <el-input></el-input>
              </td>
            </tr>
            <tr>
              <td>身份证号</td>
              <td>
                <el-input></el-input>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import winmove from "@/directives/winmove";
import TemplateWindow from '@/system/pages/customPage/templateWindow'
import { getCurrentUserId } from '@/system/api/sys'
import { 
  paperDetail,
  paperState,
  paperMajor,
  paperRoom, } from  '@/business/api/examination'


export default {
  data() {
    return {
      valueval: '',
      specializedSubject: '',
      registration: '',
      // 培训
      signUpTraining: '',
      // 试卷
      signUpTestPaper: '',
      signUpFormShow: false,
      templatePageShow: false,
      admissionTicketsShow: false,
      tableDataFirst: [],
      tableDataSecond:[],
      admissionTicketsInfo: {
        num: 123
      },
      templatePageParams: {
        id: null,
        dialogTitle: null,
        menuId: null
      },
      signUpForm: {
        examination: null,// 考试
        examinationRoom: null // 考场
      },
      signUpType:null,
      // 考场总数组
      selectData: [],
      paperCodeTest: '',
      // 选择后的数据
      checkedGh: [],
      // 总数据
      tableDataThird: 0,
      // 当前用户ID
      currUserId: 1,
      pageSize: 5,
      pageNum: 1,
      // 报名状态
      registrationStatus: [],
      affairsState: '',
      // 专业
      tableDataState:[],
      specializedSubject: '',
    };
  },
  mounted() {
    this.getSignUp();
    this.signUpMajor();
    this.signUpState();
  },
  directives: {
    winmove,
  },
  components: {
    TemplateWindow
  },
  methods: {
    signUp() {
      if (this.checkedGh.length === 0 ) {
        this.$msgBox.showMsgBox('请选择试卷');
      }else {
        let arr = [];
        arr = this.checkedGh;
        let userArr = [];
        let userEndTime = [];
        let userTest = [];
        arr.forEach( (item) =>{
          // 报名开始
          userArr.push(item.signUpStartTime);
          //报名结束
          userEndTime.push(item.signUpEndTime);
          // 考场paperCode 属性
          userTest.push(item.paperCode)
        });
        let date = new Date();
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
        let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
        let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':' ;
        let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        let strDate = Y+M+D+h+m+s;
        // console.log(userArr,userEndTime,strDate);
        if (userArr > strDate) {
          alert('报名还未开始');
        }else if (userEndTime < strDate) {
          alert('报名已结束');
        }else {
          this.signUpFormShow = true;
          this.paperCodeTest = userTest[0];
          
          console.log(this.paperCodeTest);
          this.getRoomUp();
        }
        
      }
    },
    handleAdmissionTickets() {
      this.admissionTicketsShow = true
    },
    // signUpFormDbClick(val) {
    //   if (!val) { // 考试界面
    //     this.templatePageParams.id = 1799
    //     this.templatePageParams.menuId = 1609
    //     this.templatePageParams.dialogTitle = '考试管理'
    //     this.signUpType = 'examination'
    //   } else { // 考场界面
    //     this.templatePageParams.id = 1800
    //     this.templatePageParams.menuId = 1611
    //     this.templatePageParams.dialogTitle = '考场管理'
    //     this.signUpType = 'examinationRoom'
    //   }
    //   this.templatePageShow = true
    // },
    getTemplateWindowData(val) {
      if(this.signUpType === 'examination') {
        this.signUpForm.examination = val[0].PAPER_NAME
      }else {
        this.signUpForm.examinationRoom = val[0].EXAM_ROOM_NAME
      }
      this.templatePageShow = false
    },
    closeTemplateWindow() {
      this.templatePageShow = false
    },
    // 获取当前用户ID
    currentUserID () {
       this.currUserId = that.$store.state.user.info.id;
      //  console.log(this.currUserId);
    },
    getSignUp() {
      const pageSize = this.pageSize;
      const pageNum = this.pageNum;
      const paperName = this.signUpTestPaper;
      const safetyTrainName = this.signUpTraining;
      const specialty = this.specializedSubject;
      const reportStatus = this.affairsState;
      paperDetail({
        currUserId: 25409,
        pageSize,
        pageNum,
        paperName,
        safetyTrainName,
        reportStatus,
        specialty,
      }).then( (res) => {
        this.tableDataThird = res.totalCount
        this.tableDataSecond = res.info;
        const tableDataSecond = this.tableDataSecond;
        // 展示的数据
        let arr = []
        let arrs = []
        let obj = {}
        for (let index = 0; index < tableDataSecond.length; index++) {
          if (!obj[tableDataSecond[index].row]) {
            arr.push(tableDataSecond[index])
          }
        };   
        arr.map( (item) => {
          arrs.push(
             Object.assign(item, {infoa: '查看详情'})
          )
        });
        this.tableDataFirst = arrs
        
        // console.log('tableDataFirst',this.tableDataFirst);
      });
    },
    getRoomUp(){
      const paperCode = this.paperCodeTest;
      paperRoom({
        paperCode,
      }).then( (res) => {
        console.log(res);
      });
    },
    // 专业
    signUpMajor(){
      paperMajor().then((res) => {
        this.tableDataState = res.info
      })
    },
    changeMajor(res){
      console.log(res);
      this.specializedSubject = res;
    },
    // 报名状态
    signUpState(){
      paperState().then( (res) =>{
        this.registrationStatus = res.info;
      })
    },
    changeState(res) {
      this.affairsState = res;
    },
    // 清空
    signUpQuery() {
      this.signUpTraining = '';
      this.signUpTestPaper = '';
      this.valueval = '';
      this.registration = ''; 
    },
    // 考试表格实现单选
    select(selection, row) {
	  // 清除 所有勾选项
	    this.$refs.multipleTable.clearSelection()
	    // 当表格数据都没有被勾选的时候 就返回
	    // 主要用于将当前勾选的表格状态清除
	    if(selection.length == 0) return 
      this.$refs.multipleTable.toggleRowSelection(row, true);
      if (selection.length === 1) {
        let arr = []
        arr.push(selection[0])
        this.checkedGh = arr
      }else if(selection.length === 2) {
        let arr = []
        arr.push(selection[1])
        this.checkedGh = arr
      }
      // console.log(this.checkedGh);
    },
    // 表格的选中 可以获得当前选中的数据
    selectionChange(val) {
      // 将选中的数据存储起来
      // if (val.length === 1) {
      //   this.checkedGh = val
        
      // }
      // console.log(this.checkedGh);
    },
    // 考场表格实现单选

    // 分页
    examinationPageSize (val) {
      this.pageSize = val;
      this.getSignUp();
    },
    examinationCurrentPage (val) {
      this.pageNum = val;
      this.getSignUp();
    },

  },
}
</script>

<style lang="scss" scoped>
.businessContent-wrapper {
  height: calc(100% - 133px);
}

.businessDialog {
  .dialog-header span {
    font-weight: normal;
    float: right;
    margin-left: 5px;
  }

  .dialog-body {
    position: relative;

    h2 {
      margin-bottom: 16px;
    }

    .pic-wrapper {
      background-color: #e8e8e8;
      width: 138px;
      height: 178px;
      position: absolute;
      right: 16px;
      z-index: 999;
    }

    ::v-deep.el-input,
    ::v-deep.el-input input {
      border: none;
    }

    .row .el-input {
      width: calc(100% - 42px);
      margin-bottom: 16px;
    }
  }
}
</style>
